import {
  getVariationType,
  getVariationBill,
  getVariationCard,
  saveVariation
} from '@/api/bill/index'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 显示隐藏
    show: {
      type: Boolean,
      value: false,
      observer: async function () {
        if (!this.data.init) {
          this.getInitData()
        }
      }
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    init: false,
    price: '', // 金额
    selectClassify: '0', // 选中的类型
    classifyList: [
      { id: '0', name: '支出' },
      { id: '1', name: '入账' }
    ],
    expendList: <PayType[]>[], // 支出类型列表
    incomeList: <PayType[]>[], // 入账类型列表
    selectPayType: <PayType>{}, // 选中的支付类型
    selectPayTypeList: <PayType[]>[], // 选中支付类型列表
    billList: [], // 账单列表
    selectBill: {}, // 选中的账单
    cardList: [], // 银行卡列表
    selectCard: {}, // 选中的银行卡
    selectShow: false, // 选择框显示隐藏
    selectType: '', // 选择框类型 bill: 账单 card: 银行卡
    name: '' // 备注
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 关闭窗口
    onClose() {
      const { expendList } = this.data
      this.triggerEvent('close')
      this.setData({
        price: '',
        selectClassify: '0',
        selectPayType: expendList.length ? expendList[0] : {},
        selectPayTypeList: expendList
      })
    },
    // 切换分类
    handleChangeTag(e: WechatMiniprogram.CustomEvent) {
      const { id } = e.currentTarget.dataset
      const { expendList, incomeList } = this.data
      const selectPayTypeList = id === '0' ? expendList : incomeList
      this.setData({
        selectClassify: id,
        selectPayTypeList,
        selectPayType: selectPayTypeList.length ? selectPayTypeList[0] : {}
      })
    },
    // 切换类型
    handleChangeType(e: WechatMiniprogram.CustomEvent) {
      const { id } = e.currentTarget.dataset
      const { expendList, incomeList, selectClassify } = this.data
      const list = selectClassify === '0' ? expendList : incomeList
      this.setData({ selectPayType: list.find((i: PayType) => i.id == id) })
    },
    // 获取初始化数据
    getInitData() {
      Promise.all([
        getVariationType(),
        getVariationBill(),
        getVariationCard()
      ]).then(([typeRes, billRes, cardRes]) => {
        const { expend, income } = typeRes.data
        this.setData({
          expendList: expend,
          incomeList: income,
          selectPayTypeList: expend,
          selectPayType: expend.length ? expend[0] : {},
          billList: billRes.data,
          selectBill: billRes.data.length ? billRes.data[0] : {},
          cardList: cardRes.data,
          selectCard: cardRes.data.length ? cardRes.data[0] : {},
          init: true
        })
      })
    },
    // 创建账单
    handleSelectShow(e: WechatMiniprogram.CustomEvent) {
      const { type } = e.currentTarget.dataset
      this.setData({ selectShow: true, selectType: type })
    },
    handleSelectClose() {
      this.setData({ selectShow: false })
    },
    handleSelectItem(e: WechatMiniprogram.CustomEvent) {
      const { selectType } = this.data
      const { item } = e.currentTarget.dataset
      if (selectType === 'bill') {
        this.setData({ selectBill: item })
      } else {
        this.setData({ selectCard: item })
      }
      this.handleSelectClose()
    },
    // 保存
    handleSubmit() {
      const {
        selectBill,
        selectCard,
        selectPayType,
        price,
        selectClassify,
        name
      } = this.data
      if (price === '.') wx.$toast('请输入金额')
      else if (!price) wx.$toast('请输入金额')
      else if (!selectPayType.id) wx.$toast('请选择类型')
      else if (!selectBill.id) wx.$toast('请选择账单')
      else if (!selectCard.id) wx.$toast('请选择银行卡')
      else {
        wx.$modal('是否保存该账单？').then(() => {
          saveVariation({
            price,
            type: selectClassify,
            typeId: selectPayType.id,
            billId: selectBill.id,
            cardId: selectCard.id,
            name
          }).then(() => {
            wx.$toast('保存成功')
            const pages = getCurrentPages() 
            let currentPage = pages[pages.length - 1]
            currentPage.onShow()
            this.onClose()
          })
        })
      }
    }
  }
})
